<template>
	<div class="my-map">
		<!-- 选择地图 -->
		<div class="options-bar">
			<el-select v-model="currentCode" class="map-select" placeholder="请选择">
				<el-option
					v-for="item in mapList"
					:key="item.code"
					:label="item.name"
					:value="item.code"
				/>
			</el-select>
		</div>
		<!-- 显示地图 -->
		<div class="map">
			<div class="chart-wrap">
				<v-chart ref="myVChart" :option="currentOptions" autoresize /><!-- V6+ -->
				<!-- <v-chart ref="myVChart" :options="currentOptions" autoresize /> V5 -->
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance, onBeforeMount, onMounted, watchEffect } from 'vue'
import { mapListData } from './mapList'
import SZLG from './mapJson/map-szlg.json'
import SZFT from './mapJson/map-szft.json'
import SZYT from './mapJson/map-szyt.json'
import SZ from './mapJson/map-sz.json'
import chinaMap from './mapJson/china.json'
import 'echarts-liquidfill'

/* 动态数据 */
const mapList = ref(mapListData)
const currentCode = ref('')
const currentOptions = ref({})
const loadingMap = ref(true)
const myVChart = ref() // echart 组件实例

currentCode.value = mapList.value[0].code
currentOptions.value = mapList.value[0].mapOptions
const that = getCurrentInstance(); // 获取内部组件实例 ≈ vue2的 this

// 挂载前
onBeforeMount(()=>{
	// console.log('that---', that)
	that.proxy.$echarts.registerMap('szlg', SZLG)
	that.proxy.$echarts.registerMap('szft', SZFT)
	that.proxy.$echarts.registerMap('szyt', SZYT)
	that.proxy.$echarts.registerMap('sz', SZ)
	that.proxy.$echarts.registerMap('china', chinaMap)
})
// 挂载后
onMounted(async()=>{
	/* 初始化地图 */
	// await nextTick()
})

// 监听器
watchEffect(async()=>{
	loadingMap.value = true
	currentOptions.value = mapList.value.find(item=>{
		return item.code === currentCode.value
	}).mapOptions
	loadingMap.value = false
	// if( that.ctx.$refs.myVChart) {
	// 	that.ctx.$refs.myVChart.clear()
	// 	// console.log(' that.ctx.$refs.myVChart.getDom--', that.ctx.$refs.myVChart.getDom())
	// }
	// console.log('myVChart.value-----', myVChart.value)
	if(myVChart.value) {
		myVChart.value.clear()
	}
	// that.ctx.$refs.myVChart.resize()
	// JSON.parse(JSON.stringify())
})

/* 业务逻辑 函数 */

</script>
<style lang='scss' scoped>
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.map-select {
	max-width: 240px;
}
.my-map {
  height: 100%;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
	.map {
		display: flex;
		justify-content: center;
		height: 600px;
		width: calc(100% - 20px);
		margin-top: 20px;
		box-sizing: border-box;
		background-color: var(--theme-weaken-color-10);
	}
	.chart-wrap {
  	height: 100%;
  	width: 100%;
		max-width: 800px;
		background-color: #1e1e1e; // var(--theme-weaken-color-10);
	}
}
</style>
